<template>
  <div>
    <el-container>
      <el-header style="/*background-color: #333333;*/
      margin-top: -15px;margin-left: -20px;height: 130px">
        <!--头像-->
        <el-col :span="12">
          <div class="demo-basic--circle" style="float:left;margin-left: 10px;margin-top: 25px">
            <div class="block"><el-avatar :size="100" :src="circleUrl"></el-avatar></div>
            <div class="block" v-for="size in sizeList" :key="size">
              <el-avatar :size="size" :src="circleUrl"></el-avatar>
            </div>
          </div>
          <span style="float:left;margin-left: 30px;margin-top: 20px">
            <span style="font-weight: bolder">昵称: </span><span style="color: #909399">{{ this.personalInformation.nickName }}</span>
          </span>
        </el-col>
        <span style="float:left;margin-top: 70px;margin-left: -489px">
          <span style="font-weight: bolder">简介: </span><span style="color: #909399">{{this.personalInformation.introduction}}</span>
        </span>
        <!--用户名-->
      </el-header>

      <el-main style="height: 580px;overflow: hidden">
        <el-card class="box-card" style="margin-left: -20px;width: 1260px;height: 560px;">
          <div slot="header" class="clearfix">
            <span style="float:left;margin-top: -65px;height: 100px;font-weight: bolder">我的信息</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="editMyInfo">编 辑</el-button>
          </div>
          <div style="float:left;margin-top: -65px;margin-left: 10px">
            <div style="height: 30px;text-align: left;color: #000000" class="text item">昵称: </div>
            <div style="height: 30px;text-align: left;color: #000000" class="text item">账号: </div>
            <div style="height: 30px;text-align: left;color: #000000" class="text item">注册时间</div>
            <div style="height: 30px;text-align: left;color: #000000" class="text item">状态</div>
            <div style="height: 30px;text-align: left;color: #000000" class="text item">性别</div>
            <div style="height: 30px;text-align: left;color: #000000" class="text item">简介</div>
            <div style="height: 30px;text-align: left;color: #000000" class="text item">邮箱</div>
            <div style="height: 30px;text-align: left;color: #000000" class="text item">积分</div>
            <div style="height: 30px;text-align: left;color: #000000" class="text item">年龄</div>
          </div>
          <div style="margin-top: -65px;margin-left: 200px">
            <div style="height: 30px;text-align: left;color: #909399" class="text item">{{this.personalInformation.nickName}} </div>
            <div style="height: 30px;text-align: left;color: #909399" class="text item">{{this.personalInformation.username}} </div>
            <div style="height: 30px;text-align: left;color: #909399" class="text item">{{this.personalInformation.registerTime}}</div>
            <div style="height: 30px;text-align: left;color: #909399" class="text item">{{ this.personalInformation.violation==1?"无":"封禁" }}</div>
            <div style="height: 30px;text-align: left;color: #909399" class="text item">{{ this.personalInformation.sex }}</div>
            <div style="height: 30px;text-align: left;color: #909399" class="text item">{{this.personalInformation.introduction}}</div>
            <div style="height: 30px;text-align: left;color: #909399" class="text item">{{ this.personalInformation.email }}</div>
            <div style="height: 30px;text-align: left;color: #909399" class="text item">{{ this.personalInformation.score }}</div>
            <div style="height: 30px;text-align: left;color: #909399" class="text item">{{ this.personalInformation.age }}</div>
          </div>
          
        </el-card>
      </el-main>
    </el-container>
    <!--编辑模态窗口-->
    <el-dialog title="" :visible.sync="dialogFormVisible" style="width: 1000px;height:700px;margin-left: 300px;margin-top: -30px;overflow: hidden">
      <p style="width: 90px;height: 10px;margin-left: -10px;margin-top: -50px;">编辑个人资料</p>
      <hr style="margin-top:45px;margin-left: -10px">
      <div style="margin-top: 30px;margin-left: -15px">
        <el-form :model="form">
          <el-form-item label="昵称" :label-width="formLabelWidth" style="width: 100px">
            <el-input v-model="form.nickName" autocomplete="off" style="width: 380px;height: 20px"></el-input>
          </el-form-item>
          <el-form-item label="性别" :label-width="formLabelWidth" style="width: 100px">
            <el-input v-model="form.sex" autocomplete="off" style="width: 380px;height: 20px"></el-input>
          </el-form-item>
          <el-form-item label="简介" :label-width="formLabelWidth" style="width: 100px">
            <el-input v-model="form.introduction" autocomplete="off" style="width: 380px;height: 20px"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" :label-width="formLabelWidth" style="width: 100px">
            <el-input v-model="form.email" autocomplete="off" style="width: 380px;height: 20px"></el-input>
          </el-form-item>
          <el-form-item label="年龄" :label-width="formLabelWidth" style="width: 100px">
            <el-input v-model="form.age" autocomplete="off" style="width: 380px;height: 20px"></el-input>
          </el-form-item>

        </el-form>
      </div>
      <div style="margin-top:10px;">
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="editMyInfoSure">确 定</el-button>
        </div>
      </div>

    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "userCenter-myInfo",
  data(){
    return{
      personalInformation:{ //个人资料
        age:'',
        email: '',
        id:'',
        introduction:'',
        registerTime:'',
        score:'',
        sex:'',
        username:'',
        violation:'',
        nickName:''
      },
      form: { //编辑个人资料的表单
        nickName: '',
        sex: '',
        introduction: '',
        email: '',
        age: '',
      },
      dialogFormVisible:false,
      formLabelWidth: '80px',
      successMes: ''
    }
  },
  methods:{
    //获取个人资料
    getMyInfo(){
      this.$axios.post("/api/userCenter/getMyInfoJ").then(resp=>{
        this.personalInformation=resp.data.data;
        console.log(resp)
      })
    },
    //编辑个人资料按钮
    editMyInfo(){
      this.dialogFormVisible=true;
      this.form.nickName=this.personalInformation.nickName;
      this.form.sex=this.personalInformation.sex;
      this.form.introduction=this.personalInformation.introduction;
      this.form.age=this.personalInformation.age;
      this.form.email=this.personalInformation.email;
    },
    //编辑资料确认按钮
    editMyInfoSure(){
      //先进行验证表单的合法性不能为空等
      /*if(){

      }*/
      this.$axios.post("/api/userCenter/editUserInfoJ",this.form).then(resp=>{
        console.log(resp);
        //关闭修改模态窗口
        this.dialogFormVisible=false;
        //再次执行获取我的资料实现刷新效果
        this.getMyInfo();
        //信息提示
        this.$message({
          message: resp.data.message,
          type: 'success'
        });
      })

    }
  },
  created() {
    this.getMyInfo()
  }
}
</script>

<style scoped>

</style>